<div data-page="bookingorders" class="page no-navbar">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="subnavbar">
                <div class="buttons-row">
                    <a href="#tab1" class="tab-link button color-custom button-round">未消费</a>
                    <a href="#tab2" class="tab-link button color-custom button-round">已消费</a>
                    <a href="#tab3" class="tab-link button color-custom button-round">已取消</a>
                </div>
            </div>
        </div>
    </div>
    <div class="tabs-animated-wrap">
        <div class="tabs">
            <div id="tab1" class="tab page-content infinite-scroll" data-distence="100">
                <div class="list-block cards-list virtual-list" style="margin-top: 50px">
                    <ul>
                    </ul>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                    <div class="preloader-text">正在加载...</div>
                </div>
            </div>
            <div id="tab2" class="tab page-content infinite-scroll" data-distence="100">
                <div class="list-block cards-list virtual-list" style="margin-top: 50px">
                    <ul>
                    </ul>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                    <div class="preloader-text">正在加载...</div>
                </div>
            </div>
            <div id="tab3" class="tab page-content infinite-scroll" data-distence="100">
                <div class="list-block cards-list virtual-list" style="margin-top: 50px">
                    <ul>
                    </ul>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                    <div class="preloader-text">正在加载...</div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .facebook-card .card-header {
            display: block;
            padding: 10px;
        }
        .facebook-card .facebook-name {
            font-size: 18px;
            font-weight: 500;
        }
        .facebook-card .facebook-date {
            font-size: 16px;
            color: #8e8e93;
        }
        .facebook-card .card-footer {
            background: #fafafa;
        }
        .facebook-card .card-footer a {
            font-weight: 500;
        }
        .facebook-card .card-content img {
            display: block;
        }
        .facebook-card .card-content-inner {
            padding: 15px 10px;
        }
        .card-content-inner>p {
            width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }

        .infinite-scroll-preloader {
            padding: 30px 0;
        }
    </style>
</div>
